<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>礼物愿望列表 - 筛选与查询</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #6366f1;
            --primary-light: #a5b4fc;
            --primary-dark: #4338ca;
            --secondary: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --light-bg: #f3f4f6;
            --card-bg: #ffffff;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
            --shadow: 0 2px 8px rgba(0,0,0,0.08);
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 65px;
        }
        
        /* 通用样式 */
        .section-title {
            padding: 16px;
            font-size: 1.25rem;
            font-weight: 600;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--card-bg);
        }
        
        .gift-item {
            transition: var(--transition);
        }
        
        .gift-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .gift-title {
            font-weight: 600;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .gift-meta {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .gift-price {
            color: var(--secondary);
            font-weight: 600;
        }
        
        .tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            margin-right: 4px;
            margin-bottom: 4px;
        }
        
        .tag-primary {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--primary);
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 筛选区域 */
        .filter-container {
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            padding: 12px 16px;
        }
        
        .search-box {
            position: relative;
            margin-bottom: 12px;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 24px;
            border: 1px solid var(--border-color);
            background-color: var(--light-bg);
            font-size: 0.9rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
        }
        
        .filter-row {
            margin-bottom: 12px;
        }
        
        .filter-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 6px;
            display: flex;
            justify-content: space-between;
        }
        
        .filter-label .clear-filter {
            color: var(--primary);
            font-size: 0.8rem;
            cursor: pointer;
        }
        
        .filter-options {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
        }
        
        .filter-options::-webkit-scrollbar {
            display: none;
        }
        
        .filter-option {
            flex: 0 0 auto;
            padding: 6px 14px;
            background-color: var(--light-bg);
            border-radius: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-option.active {
            background-color: var(--primary);
            color: white;
        }
        
        .filter-expand {
            color: var(--primary);
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            margin-top: 4px;
        }
        
        /* 视图切换 */
        .view-toggle {
            display: flex;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            overflow-x: auto;
        }
        
        .view-btn {
            padding: 12px 16px;
            flex-shrink: 0;
            border: none;
            background: none;
            font-size: 0.9rem;
            color: var(--text-secondary);
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .view-btn.active {
            color: var(--primary);
        }
        
        .view-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--primary);
        }
        
        /* 结果统计 */
        .results-stats {
            padding: 10px 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--primary);
            cursor: pointer;
        }
        
        /* 1. 卡片式列表 */
        .card-list {
            padding: 12px;
        }
        
        .card-list .gift-item {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
        }
        
        .card-list .gift-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            gap: 10px;
        }
        
        .card-list .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        
        .card-list .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-list .user-info {
            flex: 1;
        }
        
        .card-list .user-name {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .card-list .gift-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .card-list .gift-content {
            margin-bottom: 12px;
        }
        
        .card-list .gift-images {
            display: flex;
            gap: 6px;
            margin: 10px 0;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        
        .card-list .gift-image {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .card-list .gift-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-list .gift-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
        }
        
        .card-list .actions {
            display: flex;
            gap: 16px;
        }
        
        .card-list .action-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            background: none;
            border: none;
        }
        
        /* 2. 网格列表 */
        .grid-list {
            padding: 12px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .grid-list .gift-item {
            background-color: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .grid-list .gift-image {
            width: 100%;
            aspect-ratio: 1;
            overflow: hidden;
        }
        
        .grid-list .gift-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .grid-list .no-image {
            width: 100%;
            aspect-ratio: 1;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
        }
        
        .grid-list .gift-details {
            padding: 12px;
        }
        
        .grid-list .gift-title {
            font-size: 0.9rem;
            line-height: 1.3;
        }
        
        .grid-list .gift-meta {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
        }
        
        /* 3. 简约列表 */
        .simple-list {
            background-color: var(--card-bg);
        }
        
        .simple-list .gift-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .simple-list .gift-image {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .simple-list .gift-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .simple-list .no-image {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
            flex-shrink: 0;
        }
        
        .simple-list .gift-info {
            flex: 1;
            min-width: 0;
        }
        
        .simple-list .gift-title {
            font-size: 0.95rem;
            margin-bottom: 4px;
        }
        
        .simple-list .gift-meta {
            display: flex;
            justify-content: space-between;
        }
        
        /* 列表容器 */
        .list-container {
            display: none;
        }
        
        .list-container.active {
            display: block;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 筛选弹窗 */
        .filter-modal {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--card-bg);
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 20px 16px;
            z-index: 1001;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .filter-modal.show {
            transform: translateY(0);
        }
        
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .modal-backdrop.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--text-secondary);
        }
        
        .filter-section {
            margin-bottom: 24px;
        }
        
        .filter-section-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .price-range {
            padding: 0 4px;
        }
        
        .price-inputs {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .price-input {
            flex: 1;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            font-size: 0.9rem;
        }
        
        .price-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .range-slider {
            width: 100%;
            margin: 10px 0;
        }
        
        .modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }
        
        .modal-btn {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 500;
            transition: var(--transition);
            border: none;
        }
        
        .modal-btn.cancel {
            background-color: var(--light-bg);
            color: var(--text-primary);
        }
        
        .modal-btn.apply {
            background-color: var(--primary);
            color: white;
        }
        
        /* 空状态 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 16px;
            color: var(--border-color);
        }
        
        /* 提示消息 */
        .toast-message {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast-message.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">礼物愿望列表</div>
        <button class="nav-btn" id="filterBtn">
            <i class="fas fa-sliders"></i>
        </button>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索礼物、标签或用户..." id="searchInput">
        </div>
        
        <div class="filter-row">
            <div class="filter-label">
                <span>分类</span>
                <span class="clear-filter" data-filter="category">清除</span>
            </div>
            <div class="filter-options" id="categoryFilter">
                <div class="filter-option active" data-value="all">全部</div>
                <div class="filter-option" data-value="electronics">电子产品</div>
                <div class="filter-option" data-value="fashion">服饰</div>
                <div class="filter-option" data-value="beauty">美妆</div>
                <div class="filter-option" data-value="books">书籍</div>
                <div class="filter-option" data-value="sports">运动</div>
                <div class="filter-option" data-value="home">家居</div>
            </div>
        </div>
        
        <div class="filter-row">
            <div class="filter-label">
                <span>价格范围</span>
                <span class="clear-filter" data-filter="price">清除</span>
            </div>
            <div class="filter-options" id="priceFilter">
                <div class="filter-option active" data-value="all">全部价格</div>
                <div class="filter-option" data-value="0-100">¥0-100</div>
                <div class="filter-option" data-value="100-500">¥100-500</div>
                <div class="filter-option" data-value="500-1000">¥500-1000</div>
                <div class="filter-option" data-value="1000+">¥1000以上</div>
                <div class="filter-option filter-expand" id="customPriceFilter">
                    <span>自定义</span>
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </div>
        
        <div class="filter-row">
            <div class="filter-label">
                <span>热门程度</span>
                <span class="clear-filter" data-filter="popularity">清除</span>
            </div>
            <div class="filter-options" id="popularityFilter">
                <div class="filter-option active" data-value="all">全部</div>
                <div class="filter-option" data-value="trending">热门</div>
                <div class="filter-option" data-value="new">最新</div>
                <div class="filter-option" data-value="funded">即将达成</div>
            </div>
        </div>
    </div>
    
    <!-- 视图切换 -->
    <div class="view-toggle">
        <button class="view-btn active" data-view="card-list">
            <i class="fas fa-th-large"></i>
            <span>卡片</span>
        </button>
        <button class="view-btn" data-view="grid-list">
            <i class="fas fa-th"></i>
            <span>网格</span>
        </button>
        <button class="view-btn" data-view="simple-list">
            <i class="fas fa-list"></i>
            <span>列表</span>
        </button>
    </div>
    
    <!-- 结果统计 -->
    <div class="results-stats">
        <div class="results-count">找到 <span id="resultsCount">12</span> 个礼物愿望</div>
        <div class="sort-options" id="sortOptions">
            <span>默认排序</span>
            <i class="fas fa-chevron-down"></i>
        </div>
    </div>
    
    <!-- 1. 卡片式列表 -->
    <div class="list-container active" id="card-list">
        <div class="card-list">
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="electronics" data-price="5299" data-popularity="trending">
                <div class="gift-header">
                    <div class="user-avatar">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">数码爱好者</div>
                        <div class="gift-time">今天 10:23</div>
                    </div>
                </div>
                
                <div class="gift-content">
                    <h3 class="gift-title">希望能拥有一台轻便的笔记本电脑，用于学习和办公</h3>
                    <div class="gift-images">
                        <div class="gift-image">
                            <img src="https://picsum.photos/id/48/300/300" alt="笔记本电脑">
                        </div>
                        <div class="gift-image">
                            <img src="https://picsum.photos/id/49/300/300" alt="笔记本电脑细节">
                        </div>
                    </div>
                    <div class="gift-meta">
                        <span class="tag tag-primary">电子产品</span>
                        <span class="tag tag-primary">学习</span>
                    </div>
                </div>
                
                <div class="gift-footer">
                    <div class="gift-price">¥5,299</div>
                    <div class="actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i> 42
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i> 15
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-gift"></i> 支持
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="sports" data-price="899" data-popularity="new">
                <div class="gift-header">
                    <div class="user-avatar">
                        <img src="https://picsum.photos/id/65/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">运动达人</div>
                        <div class="gift-time">昨天 16:45</div>
                    </div>
                </div>
                
                <div class="gift-content">
                    <h3 class="gift-title">专业篮球鞋，适合比赛使用，需要高弹性和支撑</h3>
                    <div class="gift-images">
                        <div class="gift-image">
                            <img src="https://picsum.photos/id/21/300/300" alt="篮球鞋">
                        </div>
                    </div>
                    <div class="gift-meta">
                        <span class="tag tag-primary">运动</span>
                        <span class="tag tag-primary">篮球</span>
                    </div>
                </div>
                
                <div class="gift-footer">
                    <div class="gift-price">¥899</div>
                    <div class="actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i> 28
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i> 8
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-gift"></i> 支持
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item" data-category="books" data-price="299" data-popularity="funded">
                <div class="gift-header">
                    <div class="user-avatar">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">书香门第</div>
                        <div class="gift-time">3天前</div>
                    </div>
                </div>
                
                <div class="gift-content">
                    <h3 class="gift-title">希望能拥有一套《明朝那些事儿》全集，了解明朝历史</h3>
                    <div class="gift-meta">
                        <span class="tag tag-primary">书籍</span>
                        <span class="tag tag-primary">历史</span>
                    </div>
                </div>
                
                <div class="gift-footer">
                    <div class="gift-price">¥299</div>
                    <div class="actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i> 38
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i> 9
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-gift"></i> 支持
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 2. 网格列表 -->
    <div class="list-container" id="grid-list">
        <div class="grid-list">
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="electronics" data-price="5299" data-popularity="trending">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/48/300/300" alt="笔记本电脑">
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">轻便笔记本电脑，用于学习和办公</h3>
                    <span class="tag tag-primary">电子产品</span>
                    <div class="gift-meta">
                        <span>今天</span>
                        <span class="gift-price">¥5,299</span>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="sports" data-price="899" data-popularity="new">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/21/300/300" alt="篮球鞋">
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">专业篮球鞋，适合比赛使用</h3>
                    <span class="tag tag-primary">运动</span>
                    <div class="gift-meta">
                        <span>昨天</span>
                        <span class="gift-price">¥899</span>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item" data-category="books" data-price="299" data-popularity="funded">
                <div class="no-image">
                    <i class="fas fa-book fa-2x"></i>
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">《明朝那些事儿》全集，了解历史</h3>
                    <span class="tag tag-primary">书籍</span>
                    <div class="gift-meta">
                        <span>3天前</span>
                        <span class="gift-price">¥299</span>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="beauty" data-price="599" data-popularity="trending">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/96/300/300" alt="护肤品">
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">天然植物护肤品套装，适合干性皮肤</h3>
                    <span class="tag tag-primary">美妆</span>
                    <div class="gift-meta">
                        <span>4天前</span>
                        <span class="gift-price">¥599</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 3. 简约列表 -->
    <div class="list-container" id="simple-list">
        <div class="simple-list">
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="electronics" data-price="5299" data-popularity="trending">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/48/300/300" alt="笔记本电脑">
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">轻便笔记本电脑，用于学习和办公</h3>
                    <div class="gift-meta">
                        <span>今天 <span class="tag tag-primary">电子产品</span></span>
                        <span class="gift-price">¥5,299</span>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="sports" data-price="899" data-popularity="new">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/21/300/300" alt="篮球鞋">
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">专业篮球鞋，适合比赛使用</h3>
                    <div class="gift-meta">
                        <span>昨天 <span class="tag tag-primary">运动</span></span>
                        <span class="gift-price">¥899</span>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item" data-category="books" data-price="299" data-popularity="funded">
                <div class="no-image">
                    <i class="fas fa-book"></i>
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">《明朝那些事儿》全集，了解历史</h3>
                    <div class="gift-meta">
                        <span>3天前 <span class="tag tag-primary">书籍</span></span>
                        <span class="gift-price">¥299</span>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item" data-category="beauty" data-price="599" data-popularity="trending">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/96/300/300" alt="护肤品">
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">天然植物护肤品套装，适合干性皮肤</h3>
                    <div class="gift-meta">
                        <span>4天前 <span class="tag tag-primary">美妆</span></span>
                        <span class="gift-price">¥599</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-gift"></i>
            <span>礼物</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 筛选弹窗 -->
    <div class="modal-backdrop" id="modalBackdrop"></div>
    <div class="filter-modal" id="filterModal">
        <div class="modal-header">
            <div class="modal-title">高级筛选</div>
            <button class="modal-close" id="modalClose">&times;</button>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">礼物分类</div>
            <div class="filter-options">
                <div class="filter-option active" data-value="all">全部</div>
                <div class="filter-option" data-value="electronics">电子产品</div>
                <div class="filter-option" data-value="fashion">服饰</div>
                <div class="filter-option" data-value="beauty">美妆</div>
                <div class="filter-option" data-value="books">书籍</div>
                <div class="filter-option" data-value="sports">运动</div>
                <div class="filter-option" data-value="home">家居</div>
            </div>
        </div>
        
        <div class="filter-section price-range">
            <div class="filter-section-title">价格范围</div>
            <div class="price-inputs">
                <input type="number" class="price-input" id="minPrice" placeholder="最低价格">
                <span>-</span>
                <input type="number" class="price-input" id="maxPrice" placeholder="最高价格">
            </div>
            <input type="range" class="range-slider" id="priceSlider" min="0" max="10000" value="5000">
            <div style="display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary);">
                <span>¥0</span>
                <span>¥5000</span>
                <span>¥10000+</span>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">发布时间</div>
            <div class="filter-options">
                <div class="filter-option active" data-value="all">全部时间</div>
                <div class="filter-option" data-value="today">今天</div>
                <div class="filter-option" data-value="week">本周</div>
                <div class="filter-option" data-value="month">本月</div>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">筹款进度</div>
            <div class="filter-options">
                <div class="filter-option active" data-value="all">全部进度</div>
                <div class="filter-option" data-value="0-30">0-30%</div>
                <div class="filter-option" data-value="30-70">30-70%</div>
                <div class="filter-option" data-value="70-100">70-100%</div>
            </div>
        </div>
        
        <div class="modal-actions">
            <button class="modal-btn cancel" id="resetFilters">重置</button>
            <button class="modal-btn apply" id="applyFilters">应用筛选</button>
        </div>
    </div>
    
    <!-- 提示消息元素 -->
    <div class="toast-message" id="toastMessage"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const filterBtn = document.getElementById('filterBtn');
        const modalBackdrop = document.getElementById('modalBackdrop');
        const filterModal = document.getElementById('filterModal');
        const modalClose = document.getElementById('modalClose');
        const applyFiltersBtn = document.getElementById('applyFilters');
        const resetFiltersBtn = document.getElementById('resetFilters');
        const customPriceFilter = document.getElementById('customPriceFilter');
        const searchInput = document.getElementById('searchInput');
        const resultsCount = document.getElementById('resultsCount');
        const sortOptions = document.getElementById('sortOptions');
        const toastMessage = document.getElementById('toastMessage');
        const clearFilterBtns = document.querySelectorAll('.clear-filter');
        
        // 视图切换
        const viewBtns = document.querySelectorAll('.view-btn');
        const listContainers = document.querySelectorAll('.list-container');
        
        // 筛选选项
        const filterOptions = {
            category: 'all',
            price: 'all',
            popularity: 'all',
            search: ''
        };
        
        // 初始化
        function init() {
            setupEventListeners();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 筛选弹窗控制
            filterBtn.addEventListener('click', () => {
                modalBackdrop.classList.add('show');
                filterModal.classList.add('show');
            });
            
            modalClose.addEventListener('click', closeFilterModal);
            modalBackdrop.addEventListener('click', closeFilterModal);
            
            // 自定义价格筛选
            customPriceFilter.addEventListener('click', () => {
                modalBackdrop.classList.add('show');
                filterModal.classList.add('show');
                // 滚动到价格范围部分
                document.querySelector('.price-range').scrollIntoView({ behavior: 'smooth' });
            });
            
            // 应用筛选
            applyFiltersBtn.addEventListener('click', () => {
                applyFilters();
                closeFilterModal();
                showToast('筛选已应用');
            });
            
            // 重置筛选
            resetFiltersBtn.addEventListener('click', () => {
                resetAllFilters();
                showToast('筛选已重置');
            });
            
            // 视图切换
            viewBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const viewType = btn.getAttribute('data-view');
                    
                    // 更新按钮状态
                    viewBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    
                    // 更新列表显示
                    listContainers.forEach(container => {
                        container.classList.remove('active');
                    });
                    document.getElementById(viewType).classList.add('active');
                });
            });
            
            // 分类筛选
            document.querySelectorAll('#categoryFilter .filter-option').forEach(option => {
                option.addEventListener('click', () => {
                    updateFilter('category', option);
                });
            });
            
            // 价格筛选
            document.querySelectorAll('#priceFilter .filter-option:not(.filter-expand)').forEach(option => {
                option.addEventListener('click', () => {
                    updateFilter('price', option);
                });
            });
            
            // 热门程度筛选
            document.querySelectorAll('#popularityFilter .filter-option').forEach(option => {
                option.addEventListener('click', () => {
                    updateFilter('popularity', option);
                });
            });
            
            // 清除筛选
            clearFilterBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const filterType = btn.getAttribute('data-filter');
                    clearFilter(filterType);
                });
            });
            
            // 搜索功能
            searchInput.addEventListener('input', debounce(function() {
                filterOptions.search = this.value.trim().toLowerCase();
                applyFilters();
            }, 300));
            
            // 排序选项
            sortOptions.addEventListener('click', () => {
                showToast('排序选项：推荐、最新、价格低到高、价格高到低');
            });
            
            // 为所有交互按钮添加事件
            document.querySelectorAll('.action-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const actionText = this.textContent.trim() || '操作成功';
                    showToast(actionText);
                });
            });
        }
        
        // 更新筛选选项
        function updateFilter(filterType, optionElement) {
            // 更新UI
            document.querySelectorAll(`#${filterType}Filter .filter-option`).forEach(opt => {
                opt.classList.remove('active');
            });
            optionElement.classList.add('active');
            
            // 更新筛选值
            filterOptions[filterType] = optionElement.getAttribute('data-value');
            
            // 应用筛选
            applyFilters();
        }
        
        // 清除特定筛选
        function clearFilter(filterType) {
            // 找到"全部"选项并激活
            const allOption = document.querySelector(`#${filterType}Filter .filter-option[data-value="all"]`);
            if (allOption) {
                allOption.click(); // 触发点击事件来更新UI和筛选
            }
        }
        
        // 重置所有筛选
        function resetAllFilters() {
            // 重置所有筛选选项为"全部"
            clearFilter('category');
            clearFilter('price');
            clearFilter('popularity');
            
            // 清空搜索框
            searchInput.value = '';
            filterOptions.search = '';
            
            // 重置弹窗中的筛选选项
            document.querySelectorAll('.filter-modal .filter-option').forEach(option => {
                if (option.getAttribute('data-value') === 'all') {
                    option.classList.add('active');
                } else {
                    option.classList.remove('active');
                }
            });
            
            // 重置价格输入
            document.getElementById('minPrice').value = '';
            document.getElementById('maxPrice').value = '';
            document.getElementById('priceSlider').value = 5000;
            
            // 应用筛选
            applyFilters();
        }
        
        // 应用筛选
        function applyFilters() {
            let visibleCount = 0;
            
            // 对所有礼物项应用筛选
            document.querySelectorAll('.gift-item').forEach(item => {
                let isVisible = true;
                
                // 分类筛选
                if (filterOptions.category !== 'all') {
                    if (item.getAttribute('data-category') !== filterOptions.category) {
                        isVisible = false;
                    }
                }
                
                // 价格筛选
                if (isVisible && filterOptions.price !== 'all') {
                    const price = parseInt(item.getAttribute('data-price'));
                    const [min, max] = filterOptions.price.split('-').map(Number);
                    
                    if (filterOptions.price === '1000+') {
                        if (price < 1000) isVisible = false;
                    } else if (price < min || price > max) {
                        isVisible = false;
                    }
                }
                
                // 热门程度筛选
                if (isVisible && filterOptions.popularity !== 'all') {
                    if (item.getAttribute('data-popularity') !== filterOptions.popularity) {
                        isVisible = false;
                    }
                }
                
                // 搜索筛选
                if (isVisible && filterOptions.search) {
                    const title = item.querySelector('.gift-title').textContent.toLowerCase();
                    const tags = Array.from(item.querySelectorAll('.tag')).map(tag => tag.textContent.toLowerCase());
                    
                    if (!title.includes(filterOptions.search) && 
                        !tags.some(tag => tag.includes(filterOptions.search))) {
                        isVisible = false;
                    }
                }
                
                // 更新显示状态
                item.style.display = isVisible ? 'block' : 'none';
                if (isVisible) visibleCount++;
            });
            
            // 更新结果计数
            resultsCount.textContent = visibleCount;
            
            // 显示空状态（如果需要）
            const activeList = document.querySelector('.list-container.active');
            const emptyState = activeList.querySelector('.empty-state');
            
            if (visibleCount === 0) {
                if (!emptyState) {
                    const newEmptyState = document.createElement('div');
                    newEmptyState.className = 'empty-state';
                    newEmptyState.innerHTML = `
                        <i class="fas fa-box-open"></i>
                        <div>没有找到符合条件的礼物愿望</div>
                        <div style="margin-top: 8px; font-size: 0.85rem;">尝试调整筛选条件</div>
                    `;
                    activeList.appendChild(newEmptyState);
                }
            } else if (emptyState) {
                emptyState.remove();
            }
        }
        
        // 关闭筛选弹窗
        function closeFilterModal() {
            modalBackdrop.classList.remove('show');
            filterModal.classList.remove('show');
        }
        
        // 显示提示消息
        function showToast(message) {
            toastMessage.textContent = message;
            toastMessage.classList.add('show');
            setTimeout(() => {
                toastMessage.classList.remove('show');
            }, 2000);
        }
        
        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
